<template>
	<loginVue v-if="userInfo.userInfo.id==''"></loginVue>
	<view v-else-if="userCart.shoppingcartList.length==0" class="cart-null">
		<image src="../../static/logo.png"></image>
		<view class="title">购物车还是空的</view>
		<view class="btn">
			<up-button type="warning" @click="goHome">到商城逛逛</up-button>
		</view>
	</view>
	<view v-else class="cart">
		<up-sticky offsetTop="-2">
			<view class="edit" @click="edit">{{editText}}</view>
		</up-sticky>
		<view class="list">
			<view class="item" v-for="(item,index) in userCart.shoppingcartList" :key="index">
				<up-checkbox shape="circle" size="14" usedAlone v-model:checked="item.state">
				</up-checkbox>
				<image :src="baseUrl+'/'+item.goodsList[0].goodsImage" mode="aspectFill" @click="goGoodsDetail(item.goodsId)"/>
				<view class="content">
					<view class="name" @click="goGoodsDetail(item.goodsId)">{{item.goodsList[0].goodsName}}</view>
					<view class="priceNum">
						<view class="price">￥{{ item.goodsList[0].goodsSellingPrice }}</view>
						<uniNumberBoxVue v-model="item.quantity" :min="1" :max="item.goodsList[0].goodsNum"
							@change="changeValue(item)"></uniNumberBoxVue>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<up-checkbox shape="circle" size="14" labelSize="14" label="全选" usedAlone v-model:checked="checkAll">
			</up-checkbox>
			<view v-if="editText=='编辑'" class="total">
				<view>合计:</view>
				<view class="price">￥{{totalPrice}}</view>
				<view class="calc" @click="calc">结算</view>
			</view>
			<view v-else class="delete" @click="deleteCart">
				删除
			</view>
		</view>
	</view>
</template>

<script setup>
	import loginVue from '@/component/login/login.vue';
	import uniNumberBoxVue from '@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue';
	import {
		computed,
		ref,
		watch
	} from 'vue';
	import {
		get,
		post,
		baseUrl
	} from '/hooks/req.js'
	import {
		onLoad,
		onHide,
		onShow
	} from "@dcloudio/uni-app"
	import {
		useUserStore,
		useCart
	} from '@/store/index';
	const userInfo = useUserStore()
	const userCart = useCart()
	let editText = ref("编辑")
	const goHome = () => {
		uni.switchTab({
			url: '/pages/home/home'
		})
	}
	//全选
	const checkAll = computed({
		get() {
			return userCart.shoppingcartList.every(r => r.state)
		},
		set(val) {
			userCart.shoppingcartList.forEach(r => r.state = val)
		},

	})
	//总价
	const totalPrice = computed(() => {
		return userCart.shoppingcartList.filter(r => r.state).reduce((a, b) => a + b.goodsList[0]
			.goodsSellingPrice * b.quantity, 0)
	})
	//商品数量
	const changeValue = (e) => {
		const value = e
		let { goodsList,state, ...newObj } = value; 
		post('/cart/changeNum',newObj, uni.getStorageSync("token")).then(res=>{
		})
	}
	//编辑商品
	const edit = () => {
		if (editText.value == '完成') {
			editText.value = '编辑'
		} else {
			editText.value = '完成'
		}
	}
	//删除购物车商品
	const deleteCart = () => {
		let map = userCart.shoppingcartList.filter(r => r.state).map(a => a)
		let values = []
		for (let i = 0; i < map.length; i++) {
			values.push({
				"cartId": map[i].cartId,
			})
			userCart.delShoppingcartOne(map[i].cartId)
		}
		if (values.length != 0) {
			post("/cart/delete", values, uni.getStorageSync("token")).then(res => {
				uni.showToast({
					title: res.data.data,
					icon: 'success'
				})
			})
		}
	}
	//结算
	const calc = () => {
		let map = userCart.shoppingcartList.filter(r => r.state).map(a => a)
		let values = []
		for (let i = 0; i < map.length; i++) {
			values.push({
				"cartId": map[i].cartId,
				"userId": map[i].userId,
				"goodsId": map[i].goodsId,
				"goodsData": map[i].goodsList,
				"quantity": map[i].quantity
			})
		}
		if (values.length != 0) {
			uni.navigateTo({
				url: '/component/submitOrders/submitOrders?submitCartData=' + JSON.stringify(values)
			})
		} else {
			uni.showToast({
				title: "请选择商品",
				icon: 'error'
			})
		}

	}
	const goGoodsDetail = (goodsId) => {
		uni.navigateTo({
			url: '/pages/goodsDetail/goodsDetail?goodsId=' + goodsId
		})
	}
onShow(()=>{
	userCart.loadShoppingcartList();
})
	onLoad(() => {
		if (uni.getStorageSync("user")) {
			userInfo.userInfo = uni.getStorageSync("user")
			userCart.loadShoppingcartList();
		}

	})
	onHide(()=>{
		editText.value = '编辑'
	})
</script>

<style scoped lang="scss">
	.cart-null {
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		image {
			width: 80px;
			height: 80px;
		}

		.title {
			font-size: 16px;
		}

		.btn {
			margin-top: 20px;
		}
	}

	.cart {
		.edit {
			border-bottom: 1px solid #e7e7e7;
			padding-top: 5px;
			height: 20px;
			text-align: right;
			padding-right: 20px;
			font-size: 14px;
			line-height: 20px;
			background-color: #F8F8F8;
		}

		.list {
			padding: 10px;
			padding-bottom: 60px;

			.item {
				padding: 10px;
				margin-bottom: 10px;
				display: flex;
				background-color: #F8F8F9;
				align-items: center;

				image {
					width: 80px;
					height: 80px;
					margin: 0 10px;
				}

				.content {
					flex: 1;
					height: 80px;
					padding: 10px 0;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.name {
						color: black;
						font-size: 14px;
						margin-bottom: 10px;
					}

					.priceNum {
						margin-top: 10px;
						display: flex;
						justify-content: space-between;

						.price {
							color: #FF6600;
						}

					}

				}
			}

		}

		.bottom {
			height: 60px;
			border-top: 1px solid #eee;
			width: 100vw;
			box-sizing: border-box;
			position: fixed;
			bottom: 0px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;
			font-size: 16px;
			background-color: #F8F8F9;
			z-index: 999;

			.total {
				display: flex;
				align-items: center;

				.price {
					color: #FF6600;
					font-size: 16px;
				}

				.calc {
					background-color: #FF6600;
					color: white;
					width: 80px;
					height: 40px;
					text-align: center;
					border-radius: 20px;
					line-height: 40px;
					margin-left: 10px;
					font-size: 16px;
				}
			}

			.delete {
				border: 1px solid #3f3f3f;
				background-color: #ffffff;
				color: #3f3f3f;
				width: 80px;
				height: 30px;
				text-align: center;
				border-radius: 20px;
				line-height: 30px;
				margin-left: 10px;
				font-size: 16px;
			}
		}
	}
</style>